﻿<template>
  <div>
    <!-- 标题栏 -->
    <NavBar
      :title="$route.meta.title"
      :rightBtn="rightBtn"
      @handleIcon="hanldleRight"
    >
    </NavBar>
    <van-search
      v-model="queryParam.keyword"
      placeholder="关键字"
      @search="getDataList"
    >
    </van-search>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <van-list v-model="loading" :finished="!loading">
        <van-cell v-for="item in data" :key="item.Id" icon="label-o">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span>{{ item.TaskName }} </span>
          </template>
          <!-- 	自定义标题下方 label 的内容 -->
          <template #label>
            <van-button
              plain
              type="info"
              size="mini"
              @click="handlePause([item.Id])"
              >暂停</van-button
            >
            <van-button
              plain
              type="info"
              size="mini"
              @click="handleStart([item.Id])"
              >开启</van-button
            >
            <van-button
              plain
              type="info"
              size="mini"
              @click="handleTodo([item.Id])"
              >立即执行</van-button
            >
            <van-button
              plain
              type="info"
              size="mini"
              @click="handleEdit(item.Id)"
              >编辑</van-button
            >
            <van-button
              plain
              type="info"
              size="mini"
              @click="handleDelete([item.Id])"
              >删除</van-button
            >
            <van-button
              plain
              type="info"
              size="mini"
              @click="handleLog(item.GroupName, item.TaskName)"
              >记录</van-button
            >
          </template>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <span>{{ item.Status | statusFilter }}</span>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-pagination
      v-model="pagination.current"
      :total-items="pagination.total"
      :show-page-size="pagination.pageSize"
      @change="getDataList"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>

    <edit-form ref="editForm" :afterSubmit="getDataList"></edit-form>
    <log-form ref="logForm" :parentObj="this"></log-form>
  </div>
</template>

<script>
import {
  Quartz_Task_GetDataList,
  Quartz_Task_DeleteData,
  Quartz_Task_PauseData,
  Quartz_Task_StartData,
  Quartz_Task_TodoData
} from "@/api/Quartz_Manage/Quartz_Task";
import NavBar from "@/components/NavBar";
import EditForm from "./EditForm";
import LogForm from "./LogForm";
import { mapGetters } from "vuex";

const statusMap = {
  0: {
    status: "processing",
    text: "运行中"
  },
  1: {
    status: "default",
    text: "关闭"
  },
  2: {
    status: "success",
    text: "完成"
  },
  3: {
    status: "error",
    text: "异常"
  },
  4: {
    status: "error",
    text: "堵塞"
  },
  5: {
    status: "default",
    text: "未知"
  }
};

export default {
  components: {
    NavBar,
    EditForm,
    LogForm
  },
  mounted() {
    this.getDataList();

    this.rightBtn.number++;
    this.rightBtn.iconName.unshift("plus");
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      loading: false,
      queryParam: {},
      visible: false,
      selectedRowKeys: [],
      rightBtn: {
        number: 0,
        iconName: []
      },
      option: [
        { text: "TaskName", value: "TaskName" },
        { text: "GroupName", value: "GroupName" },
        { text: "Interval", value: "Interval" },
        { text: "ApiUrl", value: "ApiUrl" },
        { text: "AuthKey", value: "AuthKey" },
        { text: "AuthValue", value: "AuthValue" },
        { text: "Describe", value: "Describe" },
        { text: "RequestType", value: "RequestType" },
        { text: "LastRunTime", value: "LastRunTime" },
        { text: "Status", value: "Status" },
        { text: "ForbidOperate", value: "ForbidOperate" },
        { text: "ForbidEdit", value: "ForbidEdit" }
      ]
    };
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text;
    },
    statusTypeFilter(type) {
      return statusMap[type].status;
    }
  },
  methods: {
    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      Quartz_Task_GetDataList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: this.sorter.field || "Id",
        SortType: this.sorter.order,
        ...this.queryParam,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    hanldleRight(item) {
      if (item === "plus") {
        this.hanldleAdd();
      }
    },
    hanldleAdd() {
      this.$refs.editForm.add();
    },
    handleEdit(id) {
      this.$refs.editForm.edit(id);
    },
    handleLog(groub, name) {
      this.$refs.logForm.openForm(groub + "." + name);
    },
    handlePause(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认暂停吗?"
        })
        .then(() => {
          // on confirm
          Quartz_Task_PauseData({ ids: JSON.stringify(ids) }).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleStart(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认开始吗?"
        })
        .then(() => {
          // on confirm
          Quartz_Task_StartData({ ids: JSON.stringify(ids) }).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleTodo(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认立即执行吗?"
        })
        .then(() => {
          // on confirm
          Quartz_Task_TodoData({ ids: JSON.stringify(ids) }).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleDelete(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认删除吗?"
        })
        .then(() => {
          // on confirm
          Quartz_Task_DeleteData({ ids: JSON.stringify(ids) }).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="less">
.van-dropdown-menu {
  .van-dropdown-menu__bar {
    height: 33px;
    min-width: 80px;
  }
}
</style>
